import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/pie/lit-pie-pattern.ts"
import {PiePatternProps} from "../../../echarts/pie/lit-pie-pattern.ts";

const meta: Meta<PiePatternProps> = {
    title: 'Echarts/LitPiePattern',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip，渐变色，以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: PiePatternProps): TemplateResult => {
        return html`
            <lit-pie-pattern
                    .chartId=${args.chartId}
                    .width=${args.width}
                    .height=${args.height}
                    .title=${args.title}
                    .seriesData=${args.seriesData}
            />`;
    },
    argTypes: {
        chartId: {control: 'text'},
        width: {control: 'text'},
        height: {control: 'text'},
        title: {control: 'object'},
        seriesData: {control: 'object'},
    },
}

export default meta;
type Story = StoryObj<PiePatternProps>;

export const Default: Story = {
    args: {
        chartId: 'pie-pattern-chart',
        width: '1200px',
        height: '600px',
        title: {
            text: '饼图纹理',
            textStyle: {
                color: '#235894'
            }
        },
        seriesData: [
            {value: 1048, name: 'Search Engine'},
            {value: 735, name: 'Direct'},
            {value: 580, name: 'Email'},
            {value: 484, name: 'Union Ads'},
            {value: 300, name: 'Video Ads'}
        ]
    }
}